<script setup lang="ts">
import Title from '../Title.vue';
import Item from './Item.vue';
import { ref } from 'vue';

const hotList = ref([
  { name: '武当山', value: 80000 },
  { name: '白马庙', value: 70000 },
  { name: '西湖', value: 60000 },
  { name: '故宫', value: 50000 },
  { name: '南湖', value: 40000 }
]);
</script>

<template>
  <div class="hot fit column">
    <Title title="热门景区排行"></Title>
    <div class="content">
      <div class="dt row">
        <div class="flex flex-center col-2">排名</div>
        <div class="flex flex-center col-3">景区</div>
        <div class="flex flex-center col">预约数量</div>
      </div>
      <div class="dd column q-col-gutter-md q-pt-lg">
        <Item
          v-for="(item, i) in hotList"
          :key="i"
          :index="i + 1"
          :name="item.name"
          :value="item.value"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.hot {
  background: url(../../images/dataScreen-main-rt.png) no-repeat;
  .content {
    margin: 15px auto 0;
    width: 351px;
    height: 36px;
    .dt {
      height: 36px;
      background: url(../../images/rankingChart-bg.png);
      color: #fea917;
    }
  }
}
</style>
